<template>
	<view class="pageBg">
		<tabListView :tabList="tabList" :tabindex="swiperCur" @tabChange="tabChange"></tabListView>
		<house ref="paginationScrolling" @tabChange="tabChange" :swiperCur="swiperCur" :tabList="tabList" api="goodsOrderlists" apiData="type">
			<template #scrollList0="{ list }">
				<exhibitionList :pageType="pageType" ticket state detClick :list="list"></exhibitionList>
			</template>
			<template #scrollList1="{ list }">
				<exhibitionList :pageType="pageType" ticket state detClick :list="list"></exhibitionList>
			</template>
			<template #scrollList2="{ list }">
				<exhibitionList :pageType="pageType" ticket state detClick :list="list"></exhibitionList>
			</template>
			<template #scrollList3="{ list }">
				<exhibitionList :pageType="pageType" ticket state detClick :list="list"></exhibitionList>
			</template>
		</house>
	</view>
</template>

<script>
	import exhibitionList from '@/components/wbz/exhibitionCard/list.vue';
	import house from '@/components/paginationScrolling/house.vue';
	import tabListView from '@/components/my/tabListView/tabListView.vue';
	import { scrollViewScroll } from '@/utils/mixins.js';
	export default {
		mixins: [scrollViewScroll],
		components: {
			exhibitionList,
			tabListView,
			house,
		},
		data() {
			return {
				type: undefined,
				order_sn: null,

				swiperCur: 0,
				tabList: [
					{
						name: '雾宝展',
						type: 0,
						pageType: '2',
					},
					{
						name: '行业大会',
						type: 1,
						pageType: '3',
					},
					{
						name: '海外展',
						type: 2,
						pageType: '2',
					},
					{
						name: '海外大会',
						type: 3,
						pageType: '3',
					},
				],
			};
		},
		onLoad({ type }) {
			this.type = type;
			for (let i in this.tabList) {
				if (this.tabList[i].type === type) {
					this.swiperCur = Number(i);
				}
			}
			if (this.$refs.paginationScrolling) {
				this.init();
			}
		},
		onShow() {
			if (this.$refs.paginationScrolling) {
				this.$refs.paginationScrolling.reset();
				this.$refs.paginationScrolling.init();
			}
		},
		methods: {
			tabChange({ item, index }) {
				this.swiperCur = index;
			},
			init() {
				this.$refs.paginationScrolling.reset();
				this.$refs.paginationScrolling.init();
			},
		},
	};
</script>

<style lang="scss" scoped>
	.pageBg {
		overflow: initial;
		min-height: auto;
		.header {
			width: 100%;
			height: 145rpx;
			background: #ffffff;
			position: sticky;
			top: 0px;
			z-index: 5;
			.search {
				width: $connet-width;
				margin: 0 auto;
				height: 60rpx;
				line-height: 60rpx;
				background: #f5f5f5;
				border-radius: 30rpx;
				overflow: hidden;
				position: relative;

				.icon {
					position: absolute;
					color: $price-color;
					width: 24rpx;
					height: 24rpx;
					display: block;
					left: 23rpx;
				}

				.inp {
					position: absolute;
					width: 100%;
					height: 100%;
					padding: 0;
					margin: 0;
					font-size: $uni-font-size-12;
					padding-left: 60rpx;
				}
			}

			.tab {
				width: $connet-width;
				margin: 0 auto;
				line-height: 86rpx;
				display: flex;
				justify-content: space-between;
				height: auto;

				.item {
					position: relative;
					color: #999999;
				}

				.itemAct {
					color: $price-color;

					&:before {
						content: '';
						height: 4rpx;
						width: 100%;
						background: $price-color;
						border-radius: 2rpx;
						position: absolute;
						left: 0;
						bottom: 0;
					}
				}
			}
		}
	}
</style>
